<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref([
  {
    createdAt: "2023-01-15 09:30",
    updatedAt: "2023-01-15 09:30",
    dateRange: "2023-01-01~2023-01-31",
    stock: "706/1000",
    type: "1",
  },
  {
    createdAt: "2023-01-15 09:30",
    updatedAt: "2023-01-15 09:30",
    dateRange: "2023-01-01~2023-01-31",
    stock: "706/1000",
    type: "2",
  },
  {
    createdAt: "2023-01-15 09:30",
    updatedAt: "2023-01-15 09:30",
    dateRange: "2023-01-01~2023-01-31",
    stock: "706/1000",
    type: "3",
  },
  {
    createdAt: "2023-01-15 09:30",
    updatedAt: "2023-01-15 09:30",
    dateRange: "2023-01-01~2023-01-31",
    stock: "706/1000",
    type: "1",
  },
  {
    createdAt: "2023-01-15 09:30",
    updatedAt: "2023-01-15 09:30",
    dateRange: "2023-01-01~2023-01-31",
    stock: "706/1000",
    type: "1",
  },
]);

const drawerVisible = ref(false);
</script>

<template>
  <umrp-container :gap="16" bg-color="#f2f2f2" min-height="100%" padding="16px">
    <umrp-breadcrumb :items="['营销推广', '商品优惠券']"></umrp-breadcrumb>
    <umrp-search-card>
      <umrp-row :gutter="16">
        <umrp-col :span="8">
          <umrp-form-item label="优惠券名称/ID">
            <umrp-input placeholder="请输入优惠券名称/ID"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="优惠券状态">
            <umrp-select placeholder="请选择优惠券状态">
              <umrp-option value="1">已生效</umrp-option>
              <umrp-option value="1">已过期</umrp-option>
              <umrp-option value="1">已作废</umrp-option>
            </umrp-select>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="优惠券类型">
            <umrp-input placeholder="请选择优惠券类型"></umrp-input>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card :border="false">
      <umrp-table :data="dataList">
        <template #toolbar>
          <router-link :to="{ name: 'PromotionProductCouponCreate' }">
            <umrp-button type="primary">创建优惠券</umrp-button>
          </router-link>
        </template>
        <template #columns>
          <umrp-table-column title="优惠券名称/ID" slot-name="id" :width="180"></umrp-table-column>
          <umrp-table-column title="优惠券状态" slot-name="status" :width="100"></umrp-table-column>
          <umrp-table-column title="优惠券类型" slot-name="type" :width="120"></umrp-table-column>
          <umrp-table-column title="可领取期限" data-index="dateRange"></umrp-table-column>
          <umrp-table-column title="商品信息" slot-name="products"></umrp-table-column>
          <umrp-table-column title="剩余库存" data-index="stock" :width="100"></umrp-table-column>
          <umrp-table-column title="创建/修改时间" slot-name="time" :width="140"></umrp-table-column>
          <umrp-table-column slot-name="action" title="操作" :width="140"></umrp-table-column>
        </template>
        <template #id>
          <umi-space direction="vertical" :size="10">
            <umrp-text>90分钟优惠券</umrp-text>
            <umi-space :size="4">
              <umrp-text>ID: 202509010001</umrp-text>
              <umi-icon name="copy"></umi-icon>
            </umi-space>
          </umi-space>
        </template>
        <template #status="{ record }">
          <umi-tag color="green" v-if="record.type === '1'">已生效</umi-tag>
          <umi-tag color="gray" v-if="record.type === '2'">已过期</umi-tag>
          <umi-tag color="gray" v-if="record.type === '3'">已作废</umi-tag>
        </template>
        <template #type>
          <umi-space direction="vertical" :size="10">
            <umi-text>满减券</umi-text>
            <umi-text color="gray">满100减30元</umi-text>
          </umi-space>
        </template>
        <template #products>
          <umi-space :size="10">
            <umrp-image width="50" height="50"></umrp-image>
            <umrp-image width="50" height="50"></umrp-image>
          </umi-space>
        </template>
        <template #time="{ record }">
          <umi-space direction="vertical" :size="10">
            <umi-text>{{ record.createdAt }}</umi-text>
            <umi-text>{{ record.updatedAt }}</umi-text>
          </umi-space>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary" @click="drawerVisible = true">详情</umrp-button>
            <umrp-popconfirm message="您确认复制么？">
              <umrp-button type="danger">复制</umrp-button>
            </umrp-popconfirm>
          </umrp-space>
        </template>
        <template #sort>
          <umrp-input-number default-value="0" :width="80"></umrp-input-number>
        </template>
      </umrp-table>
    </umrp-card>
    <umi-drawer :width="800" v-model:visible="drawerVisible" title="商品优惠券">
      <umi-descriptions layout="vertical" :row-gap="32">
        <umi-descriptions-item label="优惠券ID">202509010001</umi-descriptions-item>
        <umi-descriptions-item label="优惠券名称">90分钟优惠券</umi-descriptions-item>
        <umi-descriptions-item label="优惠券状态">
          <umi-tag color="green">已生效</umi-tag>
        </umi-descriptions-item>
        <umi-descriptions-item label="优惠券类型">
          满减券
          <umi-tag color="green">满100减30元</umi-tag>
        </umi-descriptions-item>
        <umi-descriptions-item label="剩余库存">706/1000</umi-descriptions-item>
        <umi-descriptions-item label="创建时间">2023-01-15 09:30</umi-descriptions-item>
        <umi-descriptions-item label="修改时间">2023-01-15 09:30</umi-descriptions-item>
        <umi-descriptions-item label="可领取期限">2023-01-01~2023-01-31</umi-descriptions-item>
        <umi-descriptions-item label="N天数内可用">30</umi-descriptions-item>
      </umi-descriptions>
      <umi-divider padding="32px 0"></umi-divider>
      <umi-table :data="[1, 2, 3]" :pagination="false">
        <template #columns>
          <umi-table-column title="商品名称/ID" slot-name="products"></umi-table-column>
          <umi-table-column title="商品价格(元)" slot-name="price"></umi-table-column>
        </template>
        <template #products>
          <umi-space :size="10" align="center">
            <umrp-image :width="50" :height="50"></umrp-image>
            <umi-space direction="vertical" :size="10">
              <umi-text>0基础入门体验课</umi-text>
              <umi-space :size="4">
                <umrp-text>ID: 202509010001</umrp-text>
                <umi-icon name="copy"></umi-icon>
              </umi-space>
            </umi-space>
          </umi-space>
        </template>
        <template #price>
          <umi-text>168.00</umi-text>
        </template>
      </umi-table>
      <template #footer>
        <umi-button type="primary" @click="drawerVisible = false">复制</umi-button>
      </template>
    </umi-drawer>
  </umrp-container>
</template>
